<template>
	<view class="recruit-wrap">
		<customTabBar />
		<view v-if="identity == 1">
			<view :class="{'index-mian': true, 'fixd_main': locationUI.showModel}">
				<view :class="{'index_box': true, 'fixd': locationUI.showModel}">
					<view class="search-box">
						<navigator class="search-box__position" hover-class="hoverClass2" url="/pages/recruit/city-model/index?type=index">
							<text class="iconfontPT icondingwei02"></text>
							<view class="more_city txtHidden">{{locationPosition.city || '全国'}}</view>
						</navigator>
						<input class="search-ipt" confirm-type="search" v-model="jobPage.search" placeholder="搜公司、职位"></input>
						<text class="iconfontPT iconsousuo" @click="initGetDataFn"></text>
					</view>
					<view class="curm-box text-center clear-fix">
						<view class="search pull-left">
							<text :class="{'item': true, 'checked bold': !searchIndex}" @click="handleRecommendSearch">推荐</text>
							<text :class="{'item': true, 'checked bold': searchIndex}" @click="handleLocalSearch">附近</text>
							<text class="item"></text>
						</view>
						<view class="filter-warp clear-fix">
							<view class="filter">
								<view class="item pull-left checked">
									<view @click="checkCityFn">
										<view class="picker">
											<text class="txtHidden">{{locationPosition.district || locationPosition.city || '全国'}} <text class="triangle"></text></text>
										</view>
									</view>
								</view>
								<view :class="{'item pull-left': true, 'checked': array[arrayIndex]}">
									<picker @change="bindPickerChange" :value="index" :range="array">
										<view class="picker">
											{{array[arrayIndex] || '类别'}} <text class="triangle"></text>
										</view>
									</picker>
								</view>
								<view :class="{'item pull-left': true, 'checked': salary[salaryIndex]}">
									<picker @change="bindSalaryChange" :value="index" :range="salary">
										<view class="picker">
											{{salary[salaryIndex] || '薪资'}} <text class="triangle"></text>
										</view>
									</picker>
								</view>
								<view class="city_more" v-if="locationUI.showModel">
									<view class="city_more_left">
										<scroll-view class="scroll-box" scroll-y="true">
											<view @click="checkDistrictFn" data-value="-1" :class="{'item_box': true, 'checked': !locationPosition.district}">全{{locationPosition.city}}</view>
											<view @click="checkDistrictFn" :data-value="index" :class="{'item_box': true, 'checked': locationPosition.district == item.name}"
											 v-for="(item, index) in districtArray" :key="index">{{item.name}}</view>
										</scroll-view>
									</view>
									<view class="city_more_right">
										<scroll-view class="scroll-box" scroll-y="true">
											<view @click="checkStreetFn()" data-value="" :class="{'item_box': true, 'checked': !locationPosition.street}">全{{locationPosition.district || locationPosition.city}}</view>
											<view @click="checkStreetFn(item)" :data-value="item" :class="{'item_box': true, 'checked': locationPosition.street == item}"
											 v-for="(item,index) in streetArray" :key="index">{{item}}</view>
										</scroll-view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view :class="{'swiper-box': true, 'img-bg': !bannerList.length}">
					<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" indicator-color="rgba(255, 255, 255, .3)"
					 indicator-active-color="#fff">
						<block v-for="(item, index) in bannerList" :key="index">
							<swiper-item class="swiper-item text-center">
								<navigator :url="item.url">
									<view class="swiper-item">
										<image :src="item.img"></image>
									</view>
								</navigator>
							</swiper-item>
						</block>
					</swiper>
				</view>
				<view class="data-list-box">
					<PositionListTpl :positionList="positionList"></PositionListTpl>
					<no-data v-if="!positionList.length" />
				</view>
			</view>
		</view>
		<view v-else>
			<view :class="{'boss-main': true, 'boss-main-170': resumeData.position.length > 0, 'boss-main-84': resumeData.position.length < 0}">
				<view class="top-state-box">
					<view :class="{'state-item': true, 'curr': resumePage.type == '1'}" data-key="1" @click="checkTypeFn">全职</view>
					<view :class="{'state-item': true, 'curr': resumePage.type == '2'}" data-key="2" @click="checkTypeFn">兼职</view>
				</view>
				<view class="top-tab-box" v-if="resumeData.position.length > 0">
					<scroll-view scroll-x="true">
						<view @click="checkPositionFn" :data-key="item.position" :class="{'tab-item': true, 'curr': resumePage.position == item.position}"
						 v-for="(item, index) in resumeData.position" :key="index">{{item.position}}</view>
					</scroll-view>
				</view>
				<view class="for-box">
					<view v-for="(item, index) in resumeData.member" :class="{'item-box': true, 'one': index == 0}" :key="index">
						<navigator :url="'/pages/recruit/resume-detail/index?id='+item.openid+'&type='+resumePage.type" hover-class="hoverClass2">
							<view class="head-box">
								<image :src="item.head"></image>
							</view>
							<view class="name">{{item.name}}</view>
							<view class="all">
								{{item.s_work_time}}年<text class="line">|</text>
								{{item.education}}<text class="line">|</text>
								{{item.salary}}
							</view>
							<view class="work-history">
								<text class="iconfontPT iconPT-gongwenbao1"></text>
								{{item.company_name || '暂无'}}<text class="line">·</text>{{item.last_post || '工作经历'}}
							</view>
							<view class="lable-box">
								<view class="lable-item" v-for="(item, index) in item.skill" :key="index">{{item}}</view>
							</view>
							<view class="self-description">{{item.evaluate}}</view>
						</navigator>
					</view>
					<no-data v-if="!resumeData.member.length" />
				</view>
			</view>
		</view>
		<tabbar />
		<view class="bg" @click="hiddenFn" catchtouchmove='true' v-if="locationUI.showModel"></view>
		<view class="bg2" v-if="showModel" @click="hiddenFn2"></view>
		<view class="showModelBox" v-if="showModel">
			<image src="https://fdfs.unifgroup.com:8888/group1/M00/02/60/ClEhn16O7ROAZI2uAABBrqLmugI313.png" class="iconImg"></image>
			<view class="txt">'完善企业信息才能发布职位哦'</view>
			<navigator class="btn-box" hover-class="hoverClass2" url="/pages/recruit/company-manage/index">去完善</navigator>
		</view>
	</view>
</template>

<script>
	import isEmpty from '@/utils/is-empty.js'
	import {mapGetters} from "vuex"
	import {
		wxGetRegionConfig,
		getMainPositionList,
		getMemberResumeList,
		dq_up_user
	} from '../apis/recruit/index.js'
	import PositionListTpl from './components/recruit/position-list-tpl.vue'
	import customTabBar from './components/recruit/custom-tab-bar.vue'
	import location from '../utils/location.js'

	export default {
		data() {
			return {
				pageTitle: '定位中',
				leaveState: false,
				array: ['全职', '兼职'],
				arrayIndex: 0,
				searchIndex: 0,
				salaryIndex: '',
				region: [],
				streetArray: [],
				districtArray: [],
				salary: ['薪资不限', '3K以下', '3-5K', '5-10K', '10-20K', '20-50K', '50K以上'],
				bannerList: [],
				showModel: false,
				locationUI: {
					showModel: false
				},
				locationPosition: {
					city: '',
					district: '',
					street: ''
				},
				jobPage: {
					search: '',
					page: 1,
					type: '',
					city: '',
					area: '',
					distance: '',
					s_salary: '',
					e_salary: '',
					street: '',
					latitude: '',
					longitude: ''
				},
				resumeLoading: {
					hidden: true,
					status: true,
					tip: '正在加载',
					more: true
				},
				resumePage: {
					type: 1, //职位类型  1 全职   2 兼职   3 汽车兼职
					page: 1, //分页
					position: '', //职位
				},
				positionList: [],
				resumeData: {
					position: [],
					member: []
				},
				uiBox: {
					height: 0,
					top: 0,
				}
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		components: {
			PositionListTpl,
			customTabBar
		},
		onLoad(options) {
			let _this = this;

			switch (+this.identity) {
				case 1:
					_this.getLocationFn();
					break;
				case 2:
					uni.setNavigationBarTitle({
						title: ' '
					});
					_this.pageTitle = ''

					_this.initResumeDataFn();
					break;
			}
		},
		onShow() {
			this.$store.dispatch("recruit/setCurrentTabbar", 1);

			let _this = this;
			_this.locationUI.showModel = false
			// if (uni.getStorageSync('identity') != _this.identity) {

			// 	_this.positionList = []
			// 	_this.resumeData.member = []
			// 	_this.jobPage.page = 1
			// 	_this.resumePage.page = 1

			// 	_this.onLoad();
			// }
			let obj = uni.getMenuButtonBoundingClientRect()

			_this.uiBox.maxHeight = obj.height + obj.top + 10
			_this.uiBox.height = obj.height + 6
			_this.uiBox.top = obj.top

			uni.setStorageSync('selected', 1) // 设置首页的选中
		},
		onHide() {
			this.leaveState = true
		},
		onPullDownRefresh() {
			this.$throttle(this.getMessageList, 1000)
		},
		computed: {
			...mapGetters(["identity"])
		},
		onReachBottom() {
			let _this = this;
			if (this.identity == 1) {
				// if (_this.jobLoading.more) {

				_this.jobPage.hidden = false
				_this.jobPage.page = parseInt(_this.jobPage.page + 1)

				_this.initJobDataFn()
				// }
			} else {
				// if (_this.resumeLoading.more) {

				_this.resumePage.hidden = false
				_this.resumePage.page = parseInt(_this.resumePage.page + 1)

				_this.initResumeDataFn()
				// }
			}
		},
		methods: {
			handleLocalSearch() {
				this.searchIndex = 1
				this.jobPage.distance = 1

				this.initGetDataFn();
			},
			handleRecommendSearch() {
				this.searchIndex = 0
				this.jobPage.distance = 0

				this.initGetDataFn();
			},
			// -----------------------求职者主页数据加载---------------------
			//获取定位城市
			getLocationFn() {
				let _this = this;
				uni.getLocation({
					type: 'wgs84',
					success(res) {
						const latitude = res.latitude
						const longitude = res.longitude
						const speed = res.speed
						const accuracy = res.accuracy
						//sk=lugo93JNZ89WdIugC2yIELKPZe5NZI

						location(latitude, longitude)
							.then(res => {

								let city = res.data.result.address_component.city;
								let province = res.data.result.address_component.province;
								let district = res.data.result.address_component.district;
								let street = '';
								uni.setNavigationBarTitle({
									title: '➤ ' + res.data.result.address_component.street_number
								});
								_this.locationPosition.city = city
								_this.locationPosition.district = ''
								_this.locationPosition.street = ''
								_this.jobPage.latitude = latitude
								_this.jobPage.longitude = longitude

								let obj = {
									province: province,
									city: city,
									district: district
								}
								_this.setCityFn(obj);
								_this.initGetDataFn();
								// _this.getCityDetailFn();
							})
							.catch(err => {
								page.setData({
									currentCity: "获取定位失败"
								});
								let city = '成都市';
								let district = '';
								let street = '';
								_this.locationPosition.city = city
								_this.locationPosition.district = district
								_this.locationPosition.street = street

								_this.initGetDataFn();
								// _this.getCityDetailFn();
							})
					}
				})
			},
			//更新用户地区信息
			setCityFn(obj) {},
			//区域选择
			checkCityFn(e) {
				this.getCityDetailFn();
				this.locationUI.showModel = true
			},
			hiddenFn(e) {
				this.locationUI.showModel = false

				this.initGetDataFn();
			},
			hiddenFn2() {
				this.showModel = false
			},
			//处理区域数据列表
			getCityDetailFn() {
				let _this = this;
				let city = _this.locationPosition.city;
				let district = _this.locationPosition.district;
				let street = _this.locationPosition.street;
				this.getCityDetailData().then(citys => {
					let list = [];
					let forList = citys[city];
					for (let key in forList) {
						let obj = {
							name: key,
							list: forList[key]
						}
						list.push(obj)
					}

					_this.districtArray = list
					_this.streetArray = forList[district]

				})
			},
			//获取城市市区县列表，重复获取则取缓存
			getCityDetailData:(()=>{
				let cityDetailCatch = {} // 市区县列表缓存
				return async ()=> {
					cityDetailCatch = isEmpty(cityDetailCatch) ? await wxGetRegionConfig() : cityDetailCatch
					return cityDetailCatch
				}
			})(),
			//区域选择-选择区
			checkDistrictFn(e) {
				let _this = this;
				let index = e.currentTarget.dataset.value;
				if (index > -1) {
					_this.locationPosition.district = _this.districtArray[index].name
					_this.locationPosition.street = ''
					_this.streetArray = _this.districtArray[index].list
				} else {
					_this.locationPosition.district = ''
					_this.locationPosition.street = ''
					_this.streetArray = []
				}
			},
			//区域选择-选择街道
			checkStreetFn(item) {
				this.locationPosition.street = item ? item : ''
				this.locationUI.showModel = false

				this.initGetDataFn()
			},
			//职位类别选择
			bindPickerChange(e) {
				this.jobPage.page = e.detail.value == 0 ? 1 : 2
				this.arrayIndex = e.detail.value

				this.initGetDataFn()
			},
			//薪资选择
			bindSalaryChange(e) {
				this.salaryIndex = e.detail.value

				let s_salary = 0,
					e_salary = 0;
				switch (parseInt(e.detail.value)) {
					case 0:
						s_salary = '';
						e_salary = '';
						break;
					case 1:
						s_salary = 0;
						e_salary = 3;
						break;
					case 2:
						s_salary = 3;
						e_salary = 5;
						break;
					case 3:
						s_salary = 5;
						e_salary = 10;
						break;
					case 4:
						s_salary = 10;
						e_salary = 20
						break;
					case 5:
						s_salary = 20;
						e_salary = 50;
						break;
					case 6:
						s_salary = 50;
						e_salary = 2000;
						break;
				}

				this.jobPage.s_salary = s_salary
				this.jobPage.e_salary = e_salary

				this.initGetDataFn()
			},
			//初始化获取数据参数，适用于查询，条件筛选
			initGetDataFn() {
				let _this = this;
				_this.jobPage.page = 1
				_this.jobPage.city = _this.locationPosition.city
				_this.jobPage.area = _this.locationPosition.district
				_this.jobPage.street = _this.locationPosition.street
				_this.positionList = []

				_this.initJobDataFn()
			},
			//求职者获取职位列表
			initJobDataFn() {
				let _this = this;
				let params = _this.jobPage;
				params.type = _this.arrayIndex == 0 ? 1 : 2;

				uni.showToast({
					title: '加载中',
					icon: 'loading',
					duration: 10000000,
					mask: true,
				});

				getMainPositionList(params).then(res => {
					if (res.code == 1) {

						res.data.position = res.data.position.map(item => {
							item.distance = parseFloat(item.distance / 1000, 1).toFixed(1);
							return item;
						})

						_this.positionList = _this.positionList.concat(res.data.position)
						_this.bannerList = res.data.banner
						uni.hideToast();
						if (res.data.position.length <= 0 || res.data.position.length < 6) {
							uni.hideToast();
						}
					}
				})
			},
			// -----------------------招聘者主页数据加载---------------------
			//企业HR获取职位简历列表
			initResumeDataFn() {
				let _this = this;
				let obj = _this.resumePage;

				_this.resumeLoading = {
					hidden: true,
					status: true,
					tip: '加载中',
					more: false
				}

				getMemberResumeList(obj).then((res) => {
					if (res.code == 1) {

						_this.resumeData.member = _this.resumeData.member.concat(res.data.member)
						_this.resumeData.position = res.data.position
						_this.resumeLoading.hidden = false

						if (!_this.resumePage.position) {
							_this.resumePage.position = res.data.position.length > 0 ? res.data.position[0].position : []
						}
						if (res.data.member.length <= 0 || res.data.member.length < 6) {
							console.log('没有更多简历了')
							_this.resumeLoading = {
								hidden: true,
								status: false,
								tip: '没有更多简历了',
								more: false
							}
						}
					} else if (res.code == 300) {
						_this.showModel = true
						_this.resumeLoading = {
							hidden: true,
							status: false,
							tip: res.info,
							more: false
						}

					} else {
						$Message({
							content: res.info || '服务器开小差了',
							type: 'error'
						});

						_this.resumeLoading = {
							hidden: true,
							status: false,
							tip: res.info,
							more: false
						}
					}
				})
			},
			//选择职位类型
			checkTypeFn(e) {

				this.resumePage.type = e.currentTarget.dataset.key
				this.resumePage.position = ''
				this.resumeData.position = []
				this.resumeData.member = []

				this.initResumeDataFn();
			},
			//职位筛选
			checkPositionFn(e) {

				this.resumePage.position = e.currentTarget.dataset.key
				this.resumeData.member = []

				this.initResumeDataFn();
			},
			// -----------------------通用方法模块---------------------
			/**
			 * 页面上拉触底事件的处理函数
			 */
		}
	}
</script>

<style lang="less">
	.recruit-wrap{
		padding-bottom: 210rpx;
	}
	.index-mian {
		min-height: 100vh;
		background: #fff;
		margin-bottom: 110rpx;
	}

	.search-box {
		padding: 16rpx 30rpx;
		overflow: hidden;
		position: relative;
		&__position{
			display: flex;
			float: left;
			width: 140rpx;
			position: relative;
			color: #333;
			background: #F6F6F6;
			height: 60rpx;
			overflow: hidden;
		}
	}
	.more_city {
		padding: 0 10rpx;
		text-align: center;
		font-size: 24rpx;
		border-radius: 5rpx;
		height: 60rpx;
		line-height: 60rpx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}

	.search-box .icondingwei02 {
		display: inline-block;
		line-height: 60rpx;
		vertical-align: top;
		text-indent: 6rpx;
	}

	.search-ipt {
		width: 450rpx;
		padding: 8rpx 75rpx 8rpx 10rpx;
		background: #FAF7FA;
		height: 44rpx;
		line-height: 44rpx;
		font-size: 26rpx;
		float: right;
	}

	.curm-box {
		max-height: 159rpx;
		line-height: 79rpx;
		position: relative;
		padding: 0 25rpx 25rpx;
	}

	.curm-box .search {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		width: 40%;
	}

	.curm-box .search .item {
		font-size: 30rpx;
	}

	.curm-box .filter-warp {
		width: 60%;
		display: inline-block;
	}

	.curm-box .filter-warp .filter {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}

	.curm-box .filter-warp .item {
		width: 30%;
		background: rgba(245, 245, 245, 1);
		border-radius: 10rpx;
		font-size: 24rpx;
		height: 60rpx;
		line-height: 60rpx;
	}

	.curm-box .filter-warp .item.checked {
		background: #FFF2F1;
	}

	.curm-box .filter-warp .item .triangle {
		display: inline-block;
		border-color: transparent #C6C6C6 #C6C6C6 transparent;
		border-width: 8rpx 10rpx 0rpx 0rpx;
		border-style: solid;
	}

	.curm-box .filter-warp .item.checked .triangle {
		border-color: transparent #E41805 #E41805 transparent;
	}

	.curm-box .filter-warp .item .icon-zp-arrow-b {
		color: #E8E5E9;
		margin-left: 17rpx;
	}

	.picker .txtHidden {
		max-width: 80%;
		display: inline-block;
		vertical-align: top;
		text-align: right;
	}

	.curm-box .item.checked .icon-zp-arrow-b {
		color: #E11A02;
	}

	.city-box {
		height: 50rpx;
		max-width: 100%;
		background: #fff;
		overflow: hidden;
		padding: 0 30rpx 15rpx;
	}

	.city-box .city_dtl {
		display: inline-block;
		line-height: 24rpx;
		padding: 13rpx 30rpx;
		font-size: 24rpx;
		color: #E41805;
		background: #FFE7E5;
		border-radius: 5rpx;
		vertical-align: top;
		margin-right: 20rpx;
		float: left;
	}

	.city_more {
		position: absolute;
		left: 0;
		top: 78rpx;
		height: 780rpx;
		width: 100%;
		background: #fff;
		z-index: 5;
		border-top: 1rpx solid #f1f1f1;
	}

	.city_more_left {
		width: 50%;
		height: 100%;
		float: left;
		white-space: nowrap;
	}

	.scroll-box {
		height: 100%;
	}

	.city_more_right {
		width: 50%;
		height: 100%;
		background: #F6F6F6;
		float: right;
		white-space: nowrap;
	}

	.swiper-item {
		width: 100vw;
		height: 300rpx;
	}

	.swiper-item image {
		width: 100vw;
		height: 300rpx;
	}

	.search-box .iconsousuo {
		position: absolute;
		right: 47rpx;
		top: 25rpx;
		font-size: 36rpx;
	}

	.item_box {
		border-bottom: 1rpx solid #E8E8E8;
		font-size: 30rpx;
	}

	.bg {
		width: 100vw;
		height: 100vh;
		z-index: 2;
		background: rgba(0, 0, 0, 0.3);
		position: fixed;
		left: 0;
		bottom: 0;
	}

	.fixd_main {
		padding-top: 250rpx;
	}

	.fixd {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 5;
		background: #fff;
	}

	.swiper-box {
		background: #f8f8f8;
	}


	.boss-main-170 {
		padding-top: 170rpx;
	}

	.boss-main-84 {
		padding-top: 84rpx;
	}

	.top-tab-box {
		white-space: nowrap;
		padding: 0;
		font-size: 24rpx;
		color: #333;
		line-height: 24rpx;
		border-bottom: 1rpx solid #D3D3D3;
		position: fixed;
		top: 84rpx;
		left: 0;
		width: 100vw;
		height: 84rpx;
		background: #fff;
		z-index: 5;
	}

	.top-tab-box .tab-item {
		display: inline-block;
		padding: 27rpx 25rpx;
		margin-left: 5rpx;
		line-height: 30rpx
	}

	.boss-main {
		padding: 180rpx 0;
	}

	.top-tab-box .tab-item.curr {
		font-size: 26rpx;
		font-weight: bold;
	}

	.top-state-box {
		background: #E41805;
		color: #ccc;
		font-size: 30rpx;
		height: 84rpx;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		z-index: 5;
	}

	.top-state-box .state-item {
		padding: 27rpx 26rpx;
		display: inline-block;
		vertical-align: top;
		line-height: 30rpx;
	}

	.top-state-box .state-item.curr {
		padding: 22rpx 26rpx;
		color: #fff;
		font-weight: bold;
		font-size: 34rpx;
		line-height: 34rpx;
	}

	.item-box {
		padding: 30rpx;
		background: #fff;
		margin-top: 20rpx;
		color: #999;
		font-size: 24rpx;
		line-height: 24rpx;
		position: relative;
	}

	.for-box {
		min-height: calc(100vh - 160rpx);
		background: #F7F4F8;
	}

	.item-box.one {
		margin-top: 0;
	}

	.item-box {
		position: relative;
	}

	.item-box .name {
		color: #333;
		font-size: 30rpx;
		font-weight: bold;
	}

	.item-box .all {
		margin-top: 20rpx;
	}

	.item-box .all .line {
		display: inline-block;
		padding: 0 15rpx;
	}

	.item-box .head-box {
		width: 105rpx;
		height: 105rpx;
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.item-box .head-box image {
		width: 105rpx;
		height: 105rpx;
		border-radius: 50%;
	}

	.work-history {
		margin-top: 32rpx;
	}

	.work-history .iconfontPT {
		font-size: 28rpx;
		padding-right: 14rpx;
	}

	.work-history .line {
		display: inline-block;
		width: 26rpx;
		text-align: center;
	}

	.lable-box {
		margin-top: 10rpx;
	}

	.lable-box .lable-item {
		margin: 10rpx 10rpx 0 0;
		padding: 10rpx 20rpx;
		text-align: center;
		color: #5F5F5F;
		background: #f8f8f8;
		border-radius: 5rpx;
		display: inline-block;
	}

	.self-description {
		margin-top: 20rpx;
		line-height: 32rpx;
	}

	._nav {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		align-items: center;
		flex-direction: row;
		background: #E41805;
		color: #fff;
		z-index: 99;
		text-align: center;
	}

	.bg2 {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		left: 0;
		top: 0;
	}

	.showModelBox {
		width: 568rpx;
		height: 424rpx;
		background: #fff;
		z-index: 5;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		border-radius: 20rpx;
	}

	.iconImg {
		width: 250rpx;
		height: 250rpx;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		top: -125rpx;
	}

	.btn-box {
		background: linear-gradient(90deg, rgba(255, 169, 122, 1) 0%, rgba(255, 111, 31, 1) 100%);
		border-radius: 10rpx;
		width: 310rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin: 95rpx auto 0;
		font-size: 24rpx;
		color: #fff;
		text-align: center;
	}

	.txt {
		font-size: 24rpx;
		color: #666;
		text-align: center;
		margin-top: 199rpx;
		line-height: 26rpx;
	}

	.hoverClass1 {
		color: #F8F8FF !important;
	}
</style>
